<template>
  <div class="zuzhi">
    <!-- 面包屑 -->
    <el-breadcrumb separator="/" class="breadcrumb">
      <el-breadcrumb-item :to="{ path: '/index' }">
        <el-icon><House /></el-icon>首页
      </el-breadcrumb-item>
      <el-breadcrumb-item>组织机构</el-breadcrumb-item>
      <el-breadcrumb-item>组织管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 标题 -->
    <div class="title">组织管理</div>
    <!-- 按钮 -->
    <div class="btns">
      <el-button type="primary" @click="toAdd()">新增组织<el-icon><Plus /></el-icon
    ></el-button>
    <el-button type="primary" @click="exportexcel()">导出</el-button>
    </div>
    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%" border id="out-table">
      <el-table-column label="序号" width="100" type="index" />
      <el-table-column label="组织名称" prop="name" width="250">
      </el-table-column>
      <el-table-column label="组织类型" prop="region"> </el-table-column>
      <el-table-column prop="num" label="员工数" />
      <el-table-column label="负责人" prop="fuzeren"> </el-table-column>
      <el-table-column label="分管领导" prop="lingdao"> </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" @click="openexit(scope.row)">编辑</el-button>

          <el-button type="danger" @click="handleDelete(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹框 -->
    <el-dialog v-model="dialogVisible" title="修改组织" width="30%" @close="close()">
      <span class="bianji">
        <el-form-item label="组织类型:">
          <el-select v-model="form.region" placeholder="请选择">
            <el-option label="部门" value="部门" />
            <el-option label="分支机构" value="分支机构" />
            <el-option label="公司" value="公司" />
            <el-option label="项目组" value="项目组" />
            <el-option label="办公室" value="办公室" />
          </el-select>
        </el-form-item>
        <el-form-item label="员工人数:">
          <el-input v-model="form.num" />
        </el-form-item>
        <el-form-item label="负责人:">
          <el-input v-model="form.fuzeren" />
        </el-form-item>
        <el-form-item label="分管领导:">
          <el-input v-model="form.lingdao" />
        </el-form-item>
      </span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">返回</el-button>
          <el-button type="primary" @click="exit()">
            保存
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import * as XLSX from 'xlsx'
import fs from 'file-saver'
import { ElNotification } from "element-plus";
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { zuzhi, delzuzhi,exitzuzhi } from "@/api/gang/gang";
var $router = useRouter();
var dialogVisible = ref(false);
var tableData = ref([]);
var form = ref({
  id:"",
  num: "",
  lingdao: "",
  fuzeren: "",
  region: "",
});
//跳到新增页
var toAdd = () => {
  $router.push("/index/addzuzhi");
};
//获取数据
onMounted(async () => {
  var res = await zuzhi();
  console.log(res);
  tableData.value = res.data;
});
//删除
var handleDelete = async (id) => {
  var res = await delzuzhi(id);
  console.log(res);
  ElNotification({
    title: "通知",
    message: "删除组织成功",
    type: "success",
    duration: 2000,
  });
  //判断有没有id没有就删除
  var i = tableData.value.findIndex((item) => item.id == id);
  if (i != -1) {
    tableData.value.splice(i, 1);
  }
};
//编辑 回显数据
var openexit = (zuzhi) => {
  dialogVisible.value = true;
  form.value = zuzhi;
};
//确认编辑
var exit =async ()=>{
  dialogVisible.value = false;
  var res = await exitzuzhi(form.value)
  console.log(res);
  ElNotification({
    title: "通知",
    message: "修改组织成功",
    type: "success",
    duration: 2000,
  });
}
//关闭编辑弹框
var close=async ()=>{
  var res = await zuzhi();
  tableData.value = res.data;
}

//导出
var exportexcel = ()=>{
  excelExport( document.querySelector('#out-table'),'myexcel' )
}


var excelExport = (table, filename) => {
  // workbook,
  const wb = XLSX.utils.table_to_book(table)
  console.log(wb);

  /* Export to file (start a download) */
  const defaultCellStyle = {
    font: { name: 'Verdana', sz: 13, color: 'FF00FF88' },
    fill: { fgColor: { rgb: 'FFFFAA00' } },
  }
  const wopts = {
    bookType: 'xlsx',
    bookSST: false,
    type: 'binary',
    cellStyle: true,
    defaultCellStyle: defaultCellStyle,
    showGridLines: false,
  }
  const wbout = XLSX.write(wb, wopts)
  const blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' })
  fs.saveAs(blob, filename+'.xlsx')
}
var s2ab = (s) => {
  if (typeof ArrayBuffer !== 'undefined') {
    const buf = new ArrayBuffer(s.length);
    const view = new Uint8Array(buf);
    for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
    return buf;
  } else {
    const buf = new Array(s.length);
    for (let i = 0; i !== s.length; ++i) buf[i] = s.charCodeAt(i) & 0xff;
    return buf;
  }
}
</script>

<style scoped lang="scss">
.zuzhi {
  width: 100%;
  .breadcrumb {
    font-size: 20px;
  }
  .title {
    margin: 20px 0;
    padding: 0 0 20px;
    font-size: 20px;
    font-weight: bold;
    border-bottom: 1px solid #ccc;
  }
  .el-table {
    margin-top: 20px;
  }
  .el-input {
    width: 300px;
  }
  .el-form-item{
    margin: 10px 0;
  }
}
</style>